<!-- 这里是评论框组件 -->
<template>
  <div class="frame">
    <textarea
      rows="10"
      v-model="content"
      @click="show = !show"
      placeholder="写下你的评论..."
    ></textarea>
    <el-collapse-transition>
      <div class="publish" v-show="show">
        <el-upload
          class="avatar-uploader"
          :action="$axios.defaults.baseURL + '/upload'"
          list-type="picture-card"
          :auto-upload="false"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :file-list="images"
          :limit="6"
          title="最多可上传6张"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <div class="btn">
          <button class="ok" @click="puhlishComment">发布</button>
          <button class="cencel" @click="cancelPuhlist">取消</button>
        </div>
      </div>
    </el-collapse-transition>
    <!-- 登录对话框 -->
    <el-dialog
      :show-close="false"
      title="请先进行登录"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <!-- 内容填充 -->
      <div class="login" style="position:relative;">
        <LoginComponent @DialogClose="DialogClose" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import LoginComponent from "@/components/user/LoginComponent";
export default {
  components: {
    LoginComponent
  },
  data() {
    return {
      show: false,
      content: "",
      images: [],
      pics: [],
      dialogVisible: false
      // follow: "" //回复id
    };
  },
  methods: {
    //文件状态改变
    handleChange(file) {
      // console.log(file);
      // let fils = file.raw;
      // console.log(data);
      let formdata = new FormData();
      formdata.append("files", file.raw);
      this.$axios({
        url: "/upload",
        method: "post",
        data: formdata
      }).then(res => {
        // console.log(res);
        file.id = res.data[0].id;
        this.images.push(file);
        this.pics.push({ ...res.data[0], uid: file.uid });
        // console.log(this.pics);
      });
    },
    //删除文件
    handleRemove(file, fileList) {
      // console.log("删除成功");
      this.pics = fileList;
    },
    //发布评论
    puhlishComment() {
      // 判断是否登陆
      if (!this.$store.state.user.userInfo.token) {
        return (this.dialogVisible = true);
      }

      if (!this.content.trim()) {
        this.$message({
          message: "请输入内容",
          type: "error"
        });
        return;
      }
      let id = Number(this.$route.query.id);
      let data = {
        post: id,
        content: this.content
      };
      if (this.pics.length > 0) {
        data.pics = this.pics;
      }
      this.$axios({
        url: "/comments",
        method: "post",
        data,
        headers: {
          Authorization: "Bearer " + this.$store.state.user.userInfo.token
        }
      }).then(res => {
        // console.log("发布评论", res);
        if (res.data.message == "提交成功") {
          // 优化1. 提醒父页面更新评论数据
          this.$emit("reloadComment");
          this.$message({
            message: "发布成功",
            type: "success"
          });
          this.content = "";
          this.images = [];
          this.pics = [];
          this.show = false;
        }
      });
    },
    // 取消
    cancelPuhlist() {
      this.content = "";
      this.images = [];
      this.pics = [];
      this.show = false;
    },
    DialogClose() {
      this.$message.success("登录成功，您可以发评论了");
      this.dialogVisible = false;
    }
  }
};
</script>

<style lang="less" scoped>
.frame {
  textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 16px;
    margin-top: 30px;
    height: 90px;
    font-size: 13px;
    border-radius: 4px;
    background-color: #fafafa;
    resize: none;
    display: inline-block;
    vertical-align: top;
    outline-style: none;
    border: 1px solid #ccc;
    &:focus {
      border: 1px solid #409eff;
    }
  }
  .publish {
    margin-top: 10px;
    .avatar-uploader {
      /deep/ .el-upload--picture-card {
        position: relative;
        width: 90px;
        height: 90px;
        i {
          position: absolute;
          top: 30px;
          left: 30px;
        }
      }
      /deep/ .el-upload-list--picture-card .el-upload-list__item {
        width: 90px;
        height: 90px;
      }
    }
    .btn {
      margin-top: 10px;
      button {
        outline: none;
        padding: 7px 15px;
        border: none;
        border-radius: 17px;
        font-size: 18px;
      }
      .ok {
        background-color: coral;
        color: #fff;
      }
      .cencel {
        border: 1px solid #999;
        background-color: #fff;
        color: #999;
      }
    }
  }
}
</style>
